<template>
  <view class="user">
    <!-- 上方显示用户信息的区域 -->
    <view class="userinfo">
      <!-- 信息区域 -->
      <view class="top">
        <view class="avator">
          <uni-icons type="person-filled" size="30" 
            :color="logColor"></uni-icons>
        </view>
		<view class="uname" v-if="store.isLogin">
			<view>{{store.userInfo.username}}</view>
			<view>{{store.userInfo.mobile}}</view>
		</view>
		<view class="uname" v-else @tap="toLogin">点击登录</view>
      </view>
    </view>
    <!-- 下方显示的四项用户操作项 -->
    <view class="list">
      <uni-list>
        <uni-list-item v-for="item,index in userList" 
          :title="item.name" :show-extra-icon="true"
          :extra-icon="item.icon" clickable link @tap="navto(index)" ></uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	
	
	import {
		userStore
	} from '../../store/userStore.js';
	let store=userStore()
	let logColor=ref("#ccc")
	const userList = ref([{
	  name: '我的添加',
	  icon: {
	    color: '#56c48b',
	    size: '22',
	    type: 'cart'
	  }
	}, {
	  name: '查询地址',
	  icon: {
	    color: '#ff6700',
	    size: '22',
	    type: 'location-filled'
	  }
	}, {
	  name: '我的收藏',
	  icon: {
	    color: 'red',
	    size: '22',
	    type: 'heart-filled'
	  }
	}, {
	  name: '设置',
	  icon: {
	    color: 'purple',
	    size: '22',
	    type: 'gear-filled'
	  }
	}])
	function navto(index)
	{
		uni.showToast({
			title:`你点击的是${userList.value[index].name}`
		})
	}
	function toLogin(){
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}
</script>

<style lang="scss">
.user {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.userinfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.top {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avator {
  margin-right: 10px;
}

.avator uni-icons {
  margin-right: 10px;
}

.uname {
  display: flex;
  flex-direction: column;
  font-size: 16px;
  color: #333;
}

.uname view {
  margin-bottom: 5px;
}

.list {
  width: 100%;
}

uni-list-item {
  padding: 15px 0;
  border-bottom: 1px solid #f2f2f2;
}

uni-list-item:last-child {
  border-bottom: none;
}

uni-list-item:active {
  background-color: #eaeaea;
}

uni-list-item::after {
  display: none;
}

uni-list-item-title {
  font-size: 16px;
  color: #666;
}

uni-list-item-extra-icon {
  margin-left: auto;
  color: #888;
}
</style>
